<template>
  <a-modal
    title="注册故障模型"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item
          style="display: none;"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
        >
          <a-input v-decorator="['id']"/>
        </a-form-item>

        <a-form-item
          label="模型文件"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback=""
          style="text-align: left"
        >
          <a-upload
            name="modelFile"
            :multiple="true"
            :customRequest="customRequest"
            :showUploadList="false"
            accept=".wav"
          >
            <a-button> <a-icon type="upload" />上传文件</a-button>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { edit, registerModel } from '@/api/modular/main/bizfaultmodel/bizFaultModelManage'
  import { getUploadFileName } from '@/api/modular/system/fileManage'

  export default {
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        faultGif: '',
        fileList: [],
        record: {}
      }
    },
    methods: {
      edit (record) {
        this.visible = true
        this.record = record
        setTimeout(() => {
          this.form.setFieldsValue({
            id: record.id
          })
        }, 100)
      },
      customRequest (data) {
        this.fileList = []
        const formData = new FormData()
        formData.append('file', data.file)
        getUploadFileName(formData).then((res) => {
          if (res.success) {
            this.$message.success('上传成功')
            this.modelFile = res.data
            this.fileList.push(res.data)
          } else {
            this.$message.error('上传失败：' + res.message)
          }
        })
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (this.fileList.length > 0) {
            values.modelFile = this.fileList.toString()
          }
          const formData = new FormData()
          formData.append('accessToken', this.record.accessToken)
          formData.append('groupId', this.record.groupId)
          formData.append('filePath', values.modelFile)
          this.confirmLoading = true
          registerModel(formData).then((res) => {
            if (res.code === '200') {
              values.registerStatus = 1
              edit(values).then((res) => {
                if (res.success) {
                  this.$message.success('注册成功')
                  this.$emit('ok', values)
                  this.visible = false
                } else {
                  this.$message.info('注册失败：' + res.message)
                }
              }).finally((res) => {
                this.confirmLoading = false
              })
            } else {
              this.$message.error('注册失败：' + res.message)
              this.confirmLoading = false
            }
          })
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
      }
    }
  }
</script>
